<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="./CSS/demo2.css" rel="stylesheet">
</head>
<body>
<div id="root">
    <div class="a"><img src="./images/demo3.png" alt=""></div>
    <div class="a"><img src="./images/demo3_2.png" alt=""></div>
    <div class="a"><img src="./images/demo3_3.png" alt=""></div>
    <div class="a"><img src="./images/demo3_4.png" alt=""></div>

</div>
<script>
    let a = document.getElementsByClassName('a');

    setInterval(() => {
        a[0].style.borderBottomColor = color()
        a[1].style.borderLeftColor = color()
        a[2].style.borderRightColor = color()
        a[3].style.borderTopColor = color()
    }, 100)

    function color() {
        let r = parseInt(Math.random() * 255)
        let g = parseInt(Math.random() * 255)
        let b = parseInt(Math.random() * 255)
        return 'rgb(' + r + ',' + g + ',' + b + ')'
    }
</script>

</body>
</html>